<template>
  <div>
    <div class="box">
      <van-icon name="arrow-left" class="jian" @click="tui"></van-icon>
      <input type="text" placeholder="病症、药品名称、医生姓名" class="input" v-model="search">
      <span @click="sou">搜索</span>
    </div>
    <div v-if="!flag">
      <div></div>
      <div class="li">热门搜索</div>
      <div class="hj">
        <div v-for="item in kunlist" class="nmm">
          <div class="jh">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="li">历史搜索</div>
      <div class="lll">
        <div v-for="(item, index) in searchlist">
          <div class="wen">{{ item }}<span @click="del(index)">x</span></div>
        </div>
      </div>
    </div>

    <div v-if="flag">
      <div class="li">病症</div>
      <div v-for="(item, index) in soulist" :key="item.id">
        <div class="ghj">{{ item.diseaseName }}</div>
      </div>
      <div class="li">医生</div>
      <div v-for="(item, index) in soulist" :key="item.id">
        <div class="ghj">{{ item.doctorName }}</div>
      </div>
      <div class="li">药品</div>
      <div v-for="(item, index) in soulist" :key="item.id">
        <div class="ghj"> {{ item.drugsName }}</div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { onMounted, ref } from 'vue';
const title = ref('病症')
const search = ref('');
const soulist = ref([]);
const kunlist = ref([])
const flag = ref(false)

const getlist = () => {
  axios.get('/health/share/v1/popularSearch').then((res) => {
    console.log(res)
    kunlist.value = res.data.result;
  })
}
getlist();
const searchlist = ref<string[]>([]);
const sou = () => {
  axios.get('health/share/v1/homePageSearch', {
    params: {
      keyWord: search.value,
    }
  }).then(res => {
    console.log(res);
    let { diseaseSearchVoList, doctorSearchVoList, drugsSearchVoList } = res.data.result;
    let data = [...diseaseSearchVoList, ...doctorSearchVoList, ...drugsSearchVoList];
    console.log(data)
    soulist.value = data
  })
  flag.value = true;
  if (search.value) {
    const newHistory = search.value.trim();
    if (!searchlist.value.includes(newHistory)) {
      searchlist.value.unshift(newHistory);
      savesearch();
    }
    searchlist.value = '';
  }
  if(search.value==""){
    flag.value=false;
  }
}
const savesearch = () => {
  localStorage.setItem('sou', JSON.stringify(searchlist.value));
}
const readSearchHistory = () => {
  const historyStr = localStorage.getItem('sou');
  if (historyStr) {
    searchlist.value = JSON.parse(historyStr);
  }
};
onMounted(() => {
  readSearchHistory()
})
// getlist();
const tui = () => {
  router.push('/home')
}
</script>

<style scoped lang="scss">



.ghj {
  margin-left: 10px; // 20px * 0.5
  margin-top: 25px; // 50px * 0.5
}

.hj {
  display: flex;
  flex-wrap: wrap;
}

.nmm {
  width: 75px; // 150px * 0.5
  height: 20px; // 40px * 0.5
  background: #ccc;
  margin-left: 15px; // 30px * 0.5
  margin-top: 10px; // 20px * 0.5
  line-height: 20px; // 40px * 0.5
  text-align: center;
  border-radius: 25rem; // 50rem * 0.5
  display: inline;
}

.li {
  font-size: 15px; // 30px * 0.5
  margin-left: 10px; // 20px * 0.5
  color: aqua;
  margin-top: 25px; // 50px * 0.5
}

.wen {
  margin-top: 10px; // 20px * 0.5
}

.re {
  font-size: 15px; // 30px * 0.5
  margin-left: 15px; // 30px * 0.5
}

.box {
  width: 100%;
  height: 45px; // 90px * 0.5
  border-bottom: 1px solid #ccc; // 2px * 0.5
  display: flex;
}

.lll {
  margin-left: 10px; // 20px * 0.5
}

.jian {
  font-size: 22.5px; // 45px * 0.5
  margin-left: 10px; // 20px * 0.5
  margin-top: 10px; // 20px * 0.5
}

.input {
  width: 265px; // 530px * 0.5
  height: 22.5px; // 45px * 0.5
  border-radius: 25rem; // 50rem * 0.5
  margin-top: 10px; // 20px * 0.5
  z-index: 99999;
  border: 0.5px solid #ccc; // 1px * 0.5
  margin-left: 8px; // 16px * 0.5
  padding-left: 17.5px; // 35px * 0.5
}

span {
  font-size: 16.5px; // 33px * 0.5
  margin-left: 10px; // 20px * 0.5
  margin-top: 10px; // 20px * 0.5
}
</style>
